<template>
  <div>
    <!-- <div class="box">
      <h3>数码商城</h3>
      <div>
        <span>热门城市：</span>
        <select v-model="city_id">
          <option value="0">选择城市</option>
          <option v-for="(item, i) in citys" :key="i" :value="item.code">
            {{ item.name }}
          </option>
        </select>
        &nbsp;
        <select v-model="arrea_id">
          <option value="0">选择区县</option>
          <option v-for="(item, i) in arreas" :key="i" :value="item.area_id">
            {{ item.area_name }}
          </option>
        </select>
      </div>
    </div> -->

    <el-row>
      <el-col :span="24">
        <div>
          <el-form label-width="100px" :inline="true">
            <el-form-item label="热门城市：" style="margin-right: 0px">
              <el-select
                v-model="city_id"
                class="m-2"
                placeholder="请选择热门城市"
              >
                <el-option
                  v-for="item in citys"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="选择区县:">
              <el-select
                v-model="arrea_id"
                class="m-2"
                placeholder="请选择区县"
              >
                <el-option
                  v-for="item in arreas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form></div
      ></el-col>
      <el-col :span="24">
        <div id="container"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef, onMounted, ref, watch } from "vue";
import { getcityName, getcounty, getShopping, geocoding } from "../utils/index";
//备份AMap对象
let currentAMap = null;
///热门城市
let citys = ref([]);
//当前选择城市的ID
let city_id = ref("");
//区县数组
let arreas = ref([]);
let arrea_id = ref("");
const map = shallowRef(null);
onMounted(() => {
  //调用初始化地方的方法
  initMap();
  loadCitys();
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: "bab27c43a39836b529fc3c5f0d7d57e5",
  };
});
//获取热门城市
const loadCitys = () => {
  getcityName().then((res) => {
    // console.log(res);
    citys.value = res.data.result.hotcity.map((item) => {
      return { value: item.code, label: item.name };
    });
    // citys.value = res.data.result.hotcity;
  });
};
//获取热门的区县
const loadAreas = (citycode) => {
  getcounty({ citycode }).then((res) => {
    // console.log(res.data.result);
    // let arr = Object.keys(res.data.result).map((k) => {
    //   return {
    //     area_id: k,
    //     area_name: res.data.result[k],
    //   };
    // });
    // console.log(arr);
    arreas.value = Object.keys(res.data.result).map((k) => {
      return {
        value: k,
        label: res.data.result[k],
      };
    });
  });
};
//获取商城信息
const loadShops = () => {
  //获取市+区县信息
  let cityName = citys.value.find((c) => c.value == city_id.value).label;
  // console.log(cityName);
  let arreaName = arreas.value.find((a) => a.value == arrea_id.value).label;
  let address = cityName + arreaName;

  // console.log(address);
  let data = {
    key: "3f23b0e5013be629ad212d36f320e01e",
    address,
    // output: 'JSON',
  };
  geocoding(data).then((res) => {
    // console.log(res);
    // console.log(  res.data.geocodes);
    //解构 获取坐标
    let { location } = res.data.geocodes[0];
    // console.log( location.split(","));
    // // 传入经纬度，设置地图中心点
    let position = location.split(",");
    // map.value.setCenter(position);
    //调整地图的级别和中心点的位置
    // map.value.setZoomAndCenter(10, position);
  });
  //绘制区县边界
  var district = new currentAMap.DistrictSearch({
    // 创建行政区查询对象
    extensions: "all", // 返回行政区边界坐标等具体信息
    level: "district", // 设置查询行政区级别为 区
  });

  district.search(arreaName, function (status, result) {
    var bounds = result.districtList[0].boundaries; // 获取朝阳区的边界信息
    var polygons = [];
    if (bounds) {
      for (var i = 0, l = bounds.length; i < l; i++) {
        var polygon = new currentAMap.Polygon({
          //生成行政区划polygon
          map: map.value,
          strokeWeight: 1,
          path: bounds[i],
          fillOpacity: 0.7,
          fillColor: "#CCF3FF",
          strokeColor: "#CC66CC",
        });
        polygons.push(polygon);
      }
      map.value.setFitView(); // 地图自适应
      map.value.setZoom(11);
    }
  });

  let params = {
    city_id: city_id.value,
    area_id: arrea_id.value,
    pn: 1,
  };
  // console.log(params);
  getShopping(params).then((res) => {
    // console.log(res.data);
    let { shop_data } = res.data;
    // console.log(shop_data);

    //循环遍历所有的商城
    shop_data.forEach((item) => {
      // console.log(item);
      //组织商城的内容
      // <div>商城：${item.shop_name}</div>
      // <div>电话：${item.mobile}</div>
      let content = `<div style="display:flex;align-items:center">
        <div style="margin-right:5px"><img  style="width:80px" src="${item.shop_ico}"/></div>
        <div style='font-size:13px;color:#333'>
       
          <div>商城：${item.shop_name}</div>
          <div>电话：${item.mobile}</div>
          <div>地址：${item.addr}</div>
          <div>简介：${item.shop_desc}</div>
          </div>
        </div>
      `;
      const marker = new currentAMap.Marker({
        //位置
        position: [item.map_longitude, item.map_latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //标题
        title: item.shop_name,
      });

      // 将创建的点标记添加到已有的地图实例：
      map.value.add(marker);
      //给每个marker注册点击事件
      marker.on("click", function (e) {
        // console.log(e);
        // console.log(content);
        //创建并打开一个信息框
        // 创建 infoWindow 实例
        var infoWindow = new currentAMap.InfoWindow({
          // 信息框的内容
          content, //传入 dom 对象，或者 html 字符串
          offset: new currentAMap.Pixel(0, -30),
        });
        infoWindow.open(map.value, e.target.getPosition());
      });
    });
  });
};
//监听城市编号
watch(city_id, (nval) => {
  arrea_id.value = "";
  loadAreas(nval);
});
//监听区县编号
watch(arrea_id, (nval) => {
  if (nval !== "") {
    //加载商城信息
    loadShops();
  }
  // 使用clearMap方法删除所有覆盖物
  map.value.clearMap();
});
//初始化地图的方法
const initMap = () => {
  AMapLoader.load({
    key: "fd68c27832cc4179a3a39559288c7b94", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.ToolBar",
      "AMap.Scale",
      "AMap.MapType",
      // "AMap.HawkEye",
      "AMap.DistrictSearch",
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      currentAMap = AMap;
      map.value = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 5, //初始化地图级别
        center: [105.602725, 37.076636], //初始化地图中心点位置
      });
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.value.addControl(
        new AMap.ToolBar({
          position: {
            right: "20px",
            top: "150px",
          },
        })
      );
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.value.addControl(new AMap.Scale());
      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      map.value.addControl(new AMap.MapType());
      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      // map.value.addControl(new AMap.HawkEye({ isOpen: true }));
      // AMap.plugin("AMap.DistrictSearch", function () {
      //   var district = new AMap.DistrictSearch({
      //     // 创建行政区查询对象
      //     extensions: "all", // 返回行政区边界坐标等具体信息
      //     level: "district", // 设置查询行政区级别为 区
      //   });

      //   district.search("朝阳区", function (status, result) {
      //     var bounds = result.districtList[0].boundaries; // 获取朝阳区的边界信息
      //     var polygons = [];
      //     if (bounds) {
      //       for (var i = 0, l = bounds.length; i < l; i++) {
      //         var polygon = new AMap.Polygon({
      //           //生成行政区划polygon
      //           map: map.value,
      //           strokeWeight: 1,
      //           path: bounds[i],
      //           fillOpacity: 0.7,
      //           fillColor: "#CCF3FF",
      //           strokeColor: "#CC66CC",
      //         });
      //         polygons.push(polygon);
      //       }
      //       map.value.setFitView(); // 地图自适应
      //     }
      //   });
      // });
    })
    .catch((e) => {
      console.log(e);
    });
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 1px;
  /* width: 100%; */
  box-sizing: border-box;
  height: 860px;
}
.box {
  border: 1px solid red;
  padding: 5px;
  margin: 1px;
  color: #333;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
